<template>
<div class="screen-container">
  <div class="some-faces-box">
    <h3>SOME FACTS</h3>
    <h4>#1 Place To Manage All Of Your Shipments</h4>
    <p>Tempor erat elitr rebum at clita. Diam dolor diam ipsum sit. Aliqu diam amet diam et eos. Clita erat ipsum et lorem et sit, sed stet lorem sit clita duo justo magna dolore erat amet</p>
    <div class="tel-box">
      <div class="tel-icon"><ep-Headset /></div>
      <div class="tel-text">
        <h5>Call for any query!</h5>
        <p>+012 345 6789</p>
      </div>
    </div>
  </div>
  <div class="right-box">
    <div class="double-box">
      <div class="base-box">
        <div class="icon-box">
          <IconPeople />
        </div>
        <h4>1234</h4>
        <p>Happy Clients</p>
      </div>
      <div class="base-box blue-box">
        <div class="icon-box">
          <IconShip />
        </div>
        <h4>1234</h4>
        <p>Complete Shipments</p>
      </div>
    </div>
    <div class="single-box">
      <div class="base-box green-box">
        <div class="icon-box">
          <IconStar />
        </div>
        <h4>1234</h4>
        <p>Customer Reviews</p>
      </div>
    </div>
  </div>
</div>
</template>

<script setup>
import IconPeople from '~icons/my-icons/people'
import IconShip from '~icons/my-icons/ship'
import IconStar from '~icons/my-icons/star'
</script>

<style lang="scss" scoped>
$base-color: #ff3e41;
.screen-container {
  width: 1300px;
  margin: 0 auto;
  text-align: left;
  display: flex;

  .some-faces-box {
    width: 50%;

    h3 {
      font-size: 18px;
      color: #51CFED;
    }

    h4 {
      padding-top: 12px;
      font-size: 42px;
      line-height: 45px;
      padding-bottom: 57px;
    }

    p {
      font-size: 18px;
      color: gray;
    }

    .tel-box {
      padding-top: 36px; 
      display: flex;

      .tel-icon {
        background-color: $base-color;
        color: white;
        text-align: center;
        padding-top: 12px;
        box-sizing: border-box;
        width: 42px;
        height: 42px;

        svg {
          width: 24px;
          height: 24px;
        }
      }

      .tel-text {
        padding-left: 17px;

        p {
          margin-top: 8px;
          color: $base-color;
        }
      }
    }
  }

  .right-box {
      width: 50%;
      margin-left: 64px;
      gap: 12px;
      display: flex;

      .double-box, .single-box {
        width: 50%;
        display: flex;
        flex-direction: column;
      }

      .double-box {
        gap: 24px;
        justify-content: space-between;
      }

      .single-box {
        justify-content: center;
      }

      .base-box {
        width: 100%;
        height: 150px;
        padding: 10px 17px;
        box-sizing: border-box;
        color: white;
        background-color: $base-color;

        .icon-box svg {
          width: 48px;
          height: 48px;
        }

        h4 {
          font-size: 32px;
        }

        p {
          margin-top: 14px;
        }
      }

      .blue-box {
        background-color: #51CFED;
      }

      .green-box {
        background-color: green;
      }
    }
}
</style>
